<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    html {
      background-color: #e7e7e7;
    }

    input {
      width: 97%;
      height: 30px;
    }

    select {
      width: 50px;
      height: 30px;
    }

    button {
      background-color: #f03d3c;
      color: #e7e7e7;
      border: none;
    }
  </style>
  <body>
    <form action="">
      <div>
        <div>收货人姓名</div>
        <div><input type="text" placeholder="收货人姓名" /></div>
      </div>
      <div>
        <div>手机号码</div>
        <div><input type="number" placeholder="手机号码" /></div>
      </div>
      <div>
        <div>手机验证码</div>
        <div>
          <input style="width: 45%" type="number" placeholder="手机验证码" />
          <button style="width: 50%; height: 35px" onclick="varify">
            发送验证码
          </button>
        </div>
      </div>
      <div>
        <div>选择地区</div>
        <div>
          <select>
            <option value="1">湖北</option>
            <option value="2">北京</option>
            <option value="3">上海</option>
            <option value="4">广东</option>
          </select>
        </div>
        <div>
          <select>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
            <option value="4">珠海</option>
          </select>
        </div>
      </div>
      <div>
        <div>详细地址</div>
        <div>
          <textarea rows="3" style="width: 97%">详细地址</textarea>
        </div>
      </div>
      <div>
        <input
          style="background-color: #f03d3c; color: #e7e7e7; border: none"
          type="submit"
          value="提交"
          onclick="handleSubmit"
        />
      </div>
    </form>
  </body>
</html>
<script>
  const varify = () => {
    alert("校验成功");
  };

  const handleSubmit = () => {
    alert("提交成功");
  };
</script>
